<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">网络配置</a></el-breadcrumb-item>
      <el-breadcrumb-item>网络网关</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <div class="dis_f">
      <div
        v-for="item in net_list"
        :key="item.id"
        class="w150 h50 bac_f mr15 df fd bs4 ac jc radius12 p_re net-box"
      >
        <div class="fw">{{ item.title }}</div>
        <div class="fz13">{{ item.ip }}</div>
        <CircleCloseFilled
          class="p_ab"
          @click="delNet"
          style="
            width: 1em;
            height: 1em;
            margin-right: 8px;
            top: 0;
            right: -8px;
          "
        />
      </div>
      <div>
        <div
          class="w150 h50 bac_f bs4 dis_f jc radius12"
          @click="dialogFormVisible = true"
        >
          <img class="w32" src="../../assets/img/add_icon.png" alt="" />
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加网关">
      <el-form :model="form">
        <el-form-item label="网关名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="网关ip" :label-width="formLabelWidth">
          <el-input v-model="form.ip" autocomplete="off" />
        </el-form-item>
        <el-form-item label="网关层级" :label-width="formLabelWidth">
          <el-input v-model="form.layer" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addNet"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import httpApis from "../../http/index";
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const open2 = () => {
  ElMessage({
    message: "添加成功",
    type: "success",
  });
};
const form = reactive({
  title: "",
  ip: "",
  layer: "",
});
const net_list = ref([]);
function addNet() {
  httpApis.UserApi.add(form).then((res) => {
    dialogFormVisible.value = false;
    open2();
  });
}
function netList() {
  httpApis.UserApi.list().then((res) => {
    net_list.value = res.data.data;
    console.log(net_list.value);
  });
}
function delNet() {
  console.log("del");
}
onMounted(() => {
  netList();
});
</script>

<style lang="scss" scoped>
.net-box {
  svg {
    display: none;
  }
  &:hover svg {
    display: block;
  }
}
</style>
